<template>
  <div>
    <button @click='flag = !flag'>切换</button>
    <transition leave-active-class="animate__animated animate__bounceInLeft"
      enter-active-class="animate__animated animate__bounceInRight" :duration="{ enter: 5000, leave: 8000 }">
      <div v-if="flag" class="box"></div>
    </transition>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
 import 'animate.css'
const flag = ref(true)
</script>


<style scoped lang="less">
.box {
  width: 300px;
  height: 300px;
  background: red;
}
</style>